<template lang="pug">
  .sidebar-header
    div
      .sidebar-header-controls
        button.sidebar-slide-toggle.btn.btn-link(
          :class='{"active": systemMenuShow}',
          @click="toggleSystemMenu"
        )
          i.iconfont.icon-systems
        button.sidebar-menu-toggle.d-lg-inline.d-none.btn.btn-link(@click="toggleMenu")
          i.iconfont(:class="[{'icon-pin':!menuActive},{'icon-pin1':menuActive}]")
</template>

<script>
export default {
  name: 'SidebarHeader',
  props: {
    systemMenuShow: Boolean,
    menuActive: Boolean
  },
  methods: {
    toggleMenu () {
      this.$emit('toggleMenu')
    },
    toggleSystemMenu () {
      this.$emit('toggleSystemMenu')
    },
    selectHomeMenu () {
      this.$emit('selectHomeMenu')
    }
  }
}
</script>

<style lang="sass" scoped>
.sidebar-header
  color: #ccc
  padding: 0 0 0 10px
  .sidebar-header-logo
    font-size: 16px
    font-weight: normal
  .sidebar-header-controls
    float: right
    text-align: right
  .sidebar-slide-toggle,.sidebar-menu-toggle
    width: 30px
    margin-right: 10px
    padding: 0
    font-size: 16px
    color: #999
    &:hover, &:focus
      color: #ccc
  .sidebar-slide-toggle
    .iconfont
      font-size: 20px
  .sidebar-menu-toggle
    line-height: 22px
    .iconfont
      padding-top: 2px
      font-size: 22px
      font-weight: bold
</style>
